<template>
  <footer>
    <div class="footer-container">
      <div class="footer-introduce">
        <img class="title" alt="" src="@/assets/images/text-logo.png">
        <p>
          The only true heroism in the world is still to love life after one has recognized the truth of life.
        </p>
      </div>
      <div class="footer-contact">
        <div class="title">联系方式</div>
        <div class="content">
          <div class="item" v-for="(contact, index) in contacts" :key="index">
            <i :class="'iconfont ' + contact.icon"></i>
            <span>{{ contact.text }}</span>
          </div>
        </div>
      </div>
      <div class="footer-link footer-contact">
        <div class="title">资源网站</div>
        <div class="content">
          <a v-for="(link, index) in links" :key="index" target="_blank" :href="link.url">{{ link.text }}</a>
        </div>
      </div>
      <div class="footer-message" v-if="mingJuData" @click="handleClickAuthor(mingJuData.url)">
        <div class="main">
          <p>{{ mingJuData.title }}</p>
        </div>
        <div class="author">{{ mingJuData.chaodai }} {{ mingJuData.zuozhe }} 《{{ mingJuData.chuzi }}》</div>
      </div>
    </div>
    <div class="footer-title">
      <img alt="" src="@/assets/images/record-icon.png">
      <a href="https://beian.mps.gov.cn/#/query/webSearch?code=52062702000145" rel="noreferrer" target="_blank">贵公网安备52062702000145</a>
      <a href="https://beian.miit.gov.cn/" target="_blank">黔ICP备2024027311号-1</a>
    </div>
  </footer>
  <!--  <img class="mark" src="@/assets/bg.png" alt="">-->
</template>

<script lang="ts" setup>
import {onMounted, ref, Ref} from "vue";
import {getPoetry, getWeather} from "@/api/request";
import {AxiosResponse} from 'axios';

interface MingJuData {
  title: string;
  chaodai: string;
  zuozhe: string;
  chuzi: string;
  url: string;
}

// 创建一个 ref 对象并指定泛型为 MingJuData 类型
const mingJuData: Ref<MingJuData | null> = ref(null);
// 创建响应式对象
const links = [
  {text: 'CodePen', url: 'https://codepen.io/'},
  {text: 'MDN', url: 'https://developer.mozilla.org/zh-CN/'},
  {text: 'ChatGPT', url: 'https://chatgpt.com/'},
  {text: '缘觉影视', url: 'https://www.yjys.me/'},
  {text: 'Sketchfab', url: 'https://sketchfab.com/'},
  {text: 'Pinia', url: 'https://pinia.web3doc.top/'},
  {text: 'VUE', url: 'https://cn.vuejs.org/'},
  {text: 'Element Plus', url: 'https://element-plus.gitee.io/zh-CN/'},
  {text: '框架语法对比', url: 'https://component-party.lainbo.com/'}
]
const contacts = [
  {icon: 'icon-weixin', text: 'Break_LoveFor'},
  {icon: 'icon-youxiang', text: 'lil5201@outlook.com'},
  {icon: 'icon-dianhua', text: '17585857492'},
  {icon: 'icon-qq', text: '2309241494'}
]
const handleClickAuthor = (url: string) => {
  window.open(url, '_blank')
}
onMounted(async () => {
  // 假设 getPoetry 返回的是一个 AxiosPromise
  getPoetry().then((response: AxiosResponse<MingJuData>) => {
    // 在这里你可以访问 response.data 来获取响应的数据
    mingJuData.value = response.data;
  })
  getWeather().then(res => {
    console.log(res)
  })
})
</script>
<style lang="scss" scoped>
.mark {
  width: 100%;
  object-fit: cover;
  opacity: 0;
  position: fixed;
  bottom: 0;
  left: 0;
}

.footer-container {
  width: 100%;
  padding: 100px 0;
  background: #26263e;
  color: #B8B8D3;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  font-size: 15px;
  gap: 50px;

  .title {
    margin-bottom: 40px;
    color: white;
    font-weight: bold;
    font-family: "宋体", serif;
    letter-spacing: 1px;
    font-size: 20px;
  }

  .footer-introduce {
    width: 250px;
    display: flex;
    flex-direction: column;

    p {
      line-height: 25px;
      letter-spacing: 1px;
    }

    img {
      width: 100px;
      object-fit: cover;
    }
  }

  .footer-contact {
    width: 200px;
    display: flex;
    flex-direction: column;

    .content {
      height: 130px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;

      .item {
        display: flex;
        align-items: center;
        height: 50px;
      }

      .iconfont {
        margin-right: 10px;
        color: white;
      }

      .icon-weixin {
        font-size: 15px;
      }
    }
  }

  .footer-link {
    width: 230px;

    .content {
      height: 180px;
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;

      a {
        width: 50%;
      }
    }
  }

  .footer-message {
    margin-left: 20px;
    cursor: pointer;

    .author {
      width: 250px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .main {
      width: 250px;
      min-height: 150px;
      background: #222237;
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      padding: 30px;
      justify-content: center;
      line-height: 25px;
      font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
      position: relative;
      margin-bottom: 35px;

      &:after {
        content: '';
        position: absolute;
        left: 30px;
        bottom: -30px;
        width: 0;
        height: 0;
        border-top: 50px solid #222237;
        border-right: 50px solid transparent;
      }
    }
  }
}


.footer-title {
  width: 100%;
  text-align: center;
  height: 90px;
  line-height: 70px;
  color: #B8B8D3;
  font-size: 12px;
  background: #222238;
  display: flex;
  align-items: center;
  justify-content: center;

  img {
    width: 15px;
    height: 15px;
    object-fit: cover;
    margin-right: 5px;
  }

  a:last-child {
    margin-left: 20px;
  }
}
</style>
